<h5><%= t ".title" %></h5>
<div class="card mb-4" data-live-poll-region="executions-table">
  <div class="list-group list-group-flush">
    <% executions.each do |execution| %>
      <%= tag.div id: dom_id(execution), class: "list-group-item py-3" do %>
        <div class="row align-items-center text-nowrap">
          <div class="col-md-5 d-flex gap-2">
            <%= tag.span execution.number, class: "badge text-bg-secondary rounded-pill" %>
            <%= tag.code link_to(execution.id, "##{dom_id(execution)}", class: "text-muted text-decoration-none small") %>
          </div>
          <div class="col-md-2 small">
            <% if execution.queue_latency %>
              <%= format_duration execution.queue_latency %> <span class="text-muted"><%= t ".in_queue" %></span>
            <% end %>
          </div>
          <div class="col-md-2 small">
            <% if execution.runtime_latency %>
              <%= format_duration execution.runtime_latency %> <span class="text-muted"><%= t ".runtime" %></span>
            <% end %>
          </div>
          <div class="col">
            <div class="d-flex gap-3 align-items-center justify-content-end">
              <%= tag.span relative_time(execution.last_status_at, include_seconds: true), class: "small" %>
              <%= status_badge execution.status %>

              <%= tag.button type: "button", class: "btn btn-sm text-muted", role: "button",
                title: t("good_job.actions.inspect"),
                data: { bs_toggle: "collapse", bs_target: "##{dom_id(execution, 'params')}" },
                aria: { expanded: false, controls: dom_id(execution, "params") } do %>
                <%= render_icon "info" %>
                <span class="visually-hidden"><%= t "good_job.actions.inspect" %></span>
              <% end %>
            </div>
          </div>
        </div>
        <% if execution.error %>
          <div class="mt-3 small">
            <strong class="small text-danger"><%= t "good_job.shared.error" %>:</strong>
            <code class="text-wrap text-break m-0 text-secondary-emphasis"><%= execution.error %></code>
          </div>
          <% if execution.error_backtrace&.any? %>
            <%= tag.ul class: "nav nav-tabs small w-fit-content", id: dom_id(execution, :tab), role: "tablist" do %>
              <li class="nav-item" role="presentation">
                <%= tag.button t(".application_trace"), class: "nav-link active p-1", id: dom_id(execution, :application), data: { bs_toggle: "tab", bs_target: dom_id(execution, :"#application_pane") }, type: "button", role: "tab", aria: { controls: dom_id(execution, :application_pane), selected: true } %>
              </li>
              <li class="nav-item" role="presentation">
                <%= tag.button t(".full_trace"), class: "nav-link p-1", id: dom_id(execution, :full), data: { bs_toggle: "tab", bs_target: dom_id(execution, :"#full_pane") }, type: "button", role: "tab", aria: { controls: dom_id(execution, :full_pane), selected: false } %>
              </li>
            <% end %>
            <%= tag.div class: "tab-content", id: "#{dom_id(execution, :tab)}Content" do %>
              <%= tag.div class: "tab-pane fade show active", id: dom_id(execution, :application_pane), role: "tabpane", aria: { labelledby: dom_id(execution, :application) }, tabindex: 0 do %>
                <div class="small">
                  <code class="text-wrap text-break m-0 text-secondary-emphasis">
                    <%= safe_join(execution.filtered_error_backtrace, tag.br) %>
                  </code>
                </div>
              <% end %>
              <%= tag.div class: "tab-pane fade", id: dom_id(execution, :full_pane), role: "tabpane", aria: { labelledby: dom_id(execution, :full) }, tabindex: 0 do %>
                <div class="small">
                  <code class="text-wrap text-break m-0 text-secondary-emphasis">
                    <%= safe_join(execution.error_backtrace, tag.br) %>
                  </code>
                </div>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
      <%= render 'good_job/custom_execution_details', execution: execution, job: @job %>
      <%= tag.div id: dom_id(execution, "params"), class: "list-group-item collapse small bg-dark text-light" do %>
        <%= tag.pre JSON.pretty_generate(execution.display_serialized_params) %>
      <% end %>
    <% end %>
  </div>
</div>
